<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集团管理 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #333;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .toolbar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #333;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.8;
        }
        .group-status {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-active { background-color: #67C23A; }
        .status-inactive { background-color: #F56C6C; }
        .status-pending { background-color: #E6A23C; }
        .business-tag {
            margin: 2px;
        }
        .group-logo {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>集团管理</h1>
            <p>农业集团企业信息管理与业务数据统计平台</p>
        </div>
        
        <div class="container">
            <!-- 统计卡片 -->
            <div class="statistics-cards">
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalGroups }}</div>
                    <div class="stat-label">集团总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.activeGroups }}</div>
                    <div class="stat-label">活跃集团</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalFactories }}</div>
                    <div class="stat-label">下属加工厂</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalRevenue.toFixed(2) }}</div>
                    <div class="stat-label">总营收(万元)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalEmployees }}</div>
                    <div class="stat-label">员工总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.avgRating.toFixed(1) }}</div>
                    <div class="stat-label">平均评级</div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="search-form">
                    <el-input
                        v-model="searchForm.keyword"
                        placeholder="搜索集团名称、统一社会信用代码"
                        style="width: 280px;"
                        clearable
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-select v-model="searchForm.province" placeholder="选择省份" style="width: 150px;" clearable @change="handleSearch">
                        <el-option v-for="province in provinceOptions" :key="province.id" :label="province.name" :value="province.id"></el-option>
                    </el-select>
                    <el-select v-model="searchForm.status" placeholder="选择状态" style="width: 120px;" clearable @change="handleSearch">
                        <el-option label="活跃" value="active"></el-option>
                        <el-option label="停用" value="inactive"></el-option>
                        <el-option label="待审核" value="pending"></el-option>
                    </el-select>
                    <el-select v-model="searchForm.businessType" placeholder="选择业务类型" style="width: 150px;" clearable @change="handleSearch">
                        <el-option v-for="type in businessTypeOptions" :key="type" :label="type" :value="type"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="showAddDialog">新增集团</el-button>
                    <el-button type="success" @click="exportData">导出数据</el-button>
                    <el-button type="warning" @click="batchOperation">批量操作</el-button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <div class="data-card">
                <el-table :data="filteredGroups" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="logo" label="标识" width="80">
                        <template #default="scope">
                            <img v-if="scope.row.logo" :src="scope.row.logo" class="group-logo" alt="集团标识">
                            <div v-else style="width: 40px; height: 40px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999;">无</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="group_name" label="集团名称" width="200"></el-table-column>
                    <el-table-column prop="credit_code" label="统一社会信用代码" width="180"></el-table-column>
                    <el-table-column prop="legal_person" label="法定代表人" width="120"></el-table-column>
                    <el-table-column prop="contact_phone" label="联系电话" width="130"></el-table-column>
                    <el-table-column prop="province_name" label="所在省份" width="100"></el-table-column>
                    <el-table-column prop="address" label="注册地址" width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="business_scope" label="业务范围" width="150">
                        <template #default="scope">
                            <el-tag v-for="business in scope.row.business_scope.split(',')"
                                    :key="business"
                                    class="business-tag"
                                    size="small"
                                    type="info">
                                {{ business.trim() }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="registered_capital" label="注册资本(万元)" width="130">
                        <template #default="scope">
                            <span>{{ scope.row.registered_capital.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="employee_count" label="员工数量" width="100"></el-table-column>
                    <el-table-column prop="factory_count" label="下属加工厂" width="100"></el-table-column>
                    <el-table-column prop="annual_revenue" label="年营收(万元)" width="120">
                        <template #default="scope">
                            <span v-if="scope.row.annual_revenue">{{ scope.row.annual_revenue.toFixed(2) }}</span>
                            <span v-else style="color: #909399;">-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="credit_rating" label="信用评级" width="100">
                        <template #default="scope">
                            <el-rate v-model="scope.row.credit_rating" disabled show-score text-color="#ff9900" score-template="{value}分"></el-rate>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <span class="group-status" :class="'status-' + scope.row.status"></span>
                            {{ getStatusText(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="established_date" label="成立日期" width="120"></el-table-column>
                    <el-table-column prop="created_at" label="录入时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="220" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
                            <el-button size="small" type="primary" @click="editGroup(scope.row)">编辑</el-button>
                            <el-button size="small" type="warning" @click="manageFactories(scope.row)">加工厂</el-button>
                            <el-button size="small" type="danger" @click="deleteGroup(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
        
        <!-- 新增/编辑集团对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="900px"
            @close="resetForm"
        >
            <el-form :model="groupForm" :rules="formRules" ref="groupFormRef" label-width="140px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="集团名称" prop="group_name">
                            <el-input v-model="groupForm.group_name" placeholder="请输入集团名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一社会信用代码" prop="credit_code">
                            <el-input v-model="groupForm.credit_code" placeholder="请输入统一社会信用代码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="法定代表人" prop="legal_person">
                            <el-input v-model="groupForm.legal_person" placeholder="请输入法定代表人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="contact_phone">
                            <el-input v-model="groupForm.contact_phone" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="所在省份" prop="province_id">
                            <el-select v-model="groupForm.province_id" placeholder="选择省份" style="width: 100%;">
                                <el-option v-for="province in provinceOptions" :key="province.id" :label="province.name" :value="province.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="成立日期" prop="established_date">
                            <el-date-picker v-model="groupForm.established_date" type="date" placeholder="选择成立日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="注册地址" prop="address">
                    <el-input v-model="groupForm.address" placeholder="请输入注册地址"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="注册资本(万元)" prop="registered_capital">
                            <el-input-number v-model="groupForm.registered_capital" :min="0" :precision="2" placeholder="请输入注册资本" style="width: 100%;"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="员工数量" prop="employee_count">
                            <el-input-number v-model="groupForm.employee_count" :min="0" placeholder="请输入员工数量" style="width: 100%;"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年营收(万元)" prop="annual_revenue">
                            <el-input-number v-model="groupForm.annual_revenue" :min="0" :precision="2" placeholder="请输入年营收" style="width: 100%;"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="信用评级" prop="credit_rating">
                            <el-rate v-model="groupForm.credit_rating" show-score text-color="#ff9900" score-template="{value}分"></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="业务范围" prop="business_scope">
                    <el-input v-model="groupForm.business_scope" type="textarea" :rows="2" placeholder="请输入业务范围，多个用逗号分隔"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="groupForm.status" placeholder="选择状态" style="width: 100%;">
                                <el-option label="活跃" value="active"></el-option>
                                <el-option label="停用" value="inactive"></el-option>
                                <el-option label="待审核" value="pending"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="集团标识" prop="logo">
                            <el-input v-model="groupForm.logo" placeholder="请输入标识图片URL"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="groupForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveGroup">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    dialogVisible: false,
                    isEdit: false,
                    selectedGroups: [],
                    // 搜索表单
                    searchForm: {
                        keyword: '',
                        province: '',
                        status: '',
                        businessType: ''
                    },
                    // 统计数据
                    statistics: {
                        totalGroups: 156,
                        activeGroups: 142,
                        totalFactories: 1248,
                        totalRevenue: 125678.90,
                        totalEmployees: 45678,
                        avgRating: 4.2
                    },
                    // 选项数据
                    provinceOptions: [
                        { id: 1, name: '新疆维吾尔自治区' },
                        { id: 2, name: '河南省' },
                        { id: 3, name: '山东省' },
                        { id: 4, name: '河北省' },
                        { id: 5, name: '黑龙江省' },
                        { id: 6, name: '吉林省' }
                    ],
                    businessTypeOptions: ['粮食收购', '粮食加工', '粮食贸易', '农资销售', '农业技术服务', '仓储物流'],
                    // 集团数据
                    groups: [
                        {
                            id: 1,
                            group_name: '新疆天山农业集团有限公司',
                            credit_code: '91650000123456789X',
                            legal_person: '张三',
                            contact_phone: '0991-1234567',
                            province_id: 1,
                            province_name: '新疆维吾尔自治区',
                            address: '新疆乌鲁木齐市天山区解放南路123号',
                            business_scope: '粮食收购,粮食加工,粮食贸易',
                            registered_capital: 50000.00,
                            employee_count: 1250,
                            factory_count: 15,
                            annual_revenue: 25678.90,
                            credit_rating: 5,
                            status: 'active',
                            established_date: '2010-03-15',
                            logo: 'https://via.placeholder.com/40x40/84fab0/333?text=天山',
                            created_at: '2024-01-15 09:30:00',
                            remarks: '新疆地区最大的农业集团之一'
                        },
                        {
                            id: 2,
                            group_name: '河南中原粮业集团股份有限公司',
                            credit_code: '91410000987654321Y',
                            legal_person: '李四',
                            contact_phone: '0371-9876543',
                            province_id: 2,
                            province_name: '河南省',
                            address: '河南省郑州市金水区农业路456号',
                            business_scope: '粮食收购,粮食加工,仓储物流',
                            registered_capital: 80000.00,
                            employee_count: 2100,
                            factory_count: 28,
                            annual_revenue: 45678.50,
                            credit_rating: 4,
                            status: 'active',
                            established_date: '2008-06-20',
                            logo: 'https://via.placeholder.com/40x40/8fd3f4/333?text=中原',
                            created_at: '2024-01-16 10:15:00',
                            remarks: '河南省重点农业产业化龙头企业'
                        },
                        {
                            id: 3,
                            group_name: '山东齐鲁农业发展集团',
                            credit_code: '91370000456789123Z',
                            legal_person: '王五',
                            contact_phone: '0531-4567891',
                            province_id: 3,
                            province_name: '山东省',
                            address: '山东省济南市历下区经十路789号',
                            business_scope: '农业技术服务,粮食贸易,农资销售',
                            registered_capital: 35000.00,
                            employee_count: 890,
                            factory_count: 12,
                            annual_revenue: 18900.30,
                            credit_rating: 3,
                            status: 'pending',
                            established_date: '2015-09-10',
                            logo: 'https://via.placeholder.com/40x40/67C23A/333?text=齐鲁',
                            created_at: '2024-01-17 08:45:00',
                            remarks: '专注于现代农业技术推广'
                        }
                    ],
                    // 表单数据
                    groupForm: {
                        id: null,
                        group_name: '',
                        credit_code: '',
                        legal_person: '',
                        contact_phone: '',
                        province_id: '',
                        address: '',
                        business_scope: '',
                        registered_capital: null,
                        employee_count: null,
                        annual_revenue: null,
                        credit_rating: 3,
                        status: 'active',
                        established_date: '',
                        logo: '',
                        remarks: ''
                    },
                    // 表单验证规则
                    formRules: {
                        group_name: [{ required: true, message: '请输入集团名称', trigger: 'blur' }],
                        credit_code: [
                            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                            { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: '统一社会信用代码格式不正确', trigger: 'blur' }
                        ],
                        legal_person: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
                        contact_phone: [
                            { required: true, message: '请输入联系电话', trigger: 'blur' },
                            { pattern: /^(\d{3,4}-)?\d{7,8}$|^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
                        ],
                        province_id: [{ required: true, message: '请选择省份', trigger: 'change' }],
                        address: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
                        business_scope: [{ required: true, message: '请输入业务范围', trigger: 'blur' }],
                        registered_capital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                    },
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 3
                    }
                };
            },
            
            computed: {
                dialogTitle() {
                    return this.isEdit ? '编辑集团' : '新增集团';
                },
                
                filteredGroups() {
                    let filtered = this.groups;
                    
                    if (this.searchForm.keyword) {
                        filtered = filtered.filter(item => 
                            item.group_name.includes(this.searchForm.keyword) || 
                            item.credit_code.includes(this.searchForm.keyword)
                        );
                    }
                    
                    if (this.searchForm.province) {
                        filtered = filtered.filter(item => item.province_id === this.searchForm.province);
                    }
                    
                    if (this.searchForm.status) {
                        filtered = filtered.filter(item => item.status === this.searchForm.status);
                    }
                    
                    if (this.searchForm.businessType) {
                        filtered = filtered.filter(item => item.business_scope.includes(this.searchForm.businessType));
                    }
                    
                    return filtered;
                }
            },
            
            methods: {
                /**
                 * 获取状态文本
                 */
                getStatusText(status) {
                    const statusMap = {
                        'active': '活跃',
                        'inactive': '停用',
                        'pending': '待审核'
                    };
                    return statusMap[status] || '未知';
                },
                
                /**
                 * 搜索处理
                 */
                handleSearch() {
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 重置搜索
                 */
                resetSearch() {
                    this.searchForm = {
                        keyword: '',
                        province: '',
                        status: '',
                        businessType: ''
                    };
                    this.handleSearch();
                },
                
                /**
                 * 处理选择变化
                 */
                handleSelectionChange(selection) {
                    this.selectedGroups = selection;
                },
                
                /**
                 * 显示新增对话框
                 */
                showAddDialog() {
                    this.isEdit = false;
                    this.dialogVisible = true;
                },
                
                /**
                 * 查看详情
                 */
                viewDetails(row) {
                    ElMessage.info(`查看集团 ${row.group_name} 的详细信息`);
                },
                
                /**
                 * 编辑集团
                 */
                editGroup(row) {
                    this.isEdit = true;
                    this.groupForm = { ...row };
                    this.dialogVisible = true;
                },
                
                /**
                 * 管理加工厂
                 */
                manageFactories(row) {
                    ElMessage.info(`管理集团 ${row.group_name} 的下属加工厂`);
                },
                
                /**
                 * 删除集团
                 */
                deleteGroup(row) {
                    ElMessageBox.confirm(
                        `确定要删除集团 ${row.group_name} 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        const index = this.groups.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.groups.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                },
                
                /**
                 * 保存集团
                 */
                saveGroup() {
                    this.$refs.groupFormRef.validate((valid) => {
                        if (valid) {
                            if (this.isEdit) {
                                // 编辑模式
                                const index = this.groups.findIndex(item => item.id === this.groupForm.id);
                                if (index > -1) {
                                    const province = this.provinceOptions.find(p => p.id === this.groupForm.province_id);
                                    this.groups[index] = { 
                                        ...this.groupForm,
                                        province_name: province ? province.name : '',
                                        factory_count: this.groups[index].factory_count || 0
                                    };
                                    ElMessage.success('更新成功');
                                }
                            } else {
                                // 新增模式
                                const province = this.provinceOptions.find(p => p.id === this.groupForm.province_id);
                                const newGroup = {
                                    ...this.groupForm,
                                    id: Date.now(),
                                    province_name: province ? province.name : '',
                                    factory_count: 0,
                                    created_at: new Date().toLocaleString()
                                };
                                this.groups.push(newGroup);
                                ElMessage.success('新增成功');
                            }
                            this.dialogVisible = false;
                            this.resetForm();
                        }
                    });
                },
                
                /**
                 * 重置表单
                 */
                resetForm() {
                    this.groupForm = {
                        id: null,
                        group_name: '',
                        credit_code: '',
                        legal_person: '',
                        contact_phone: '',
                        province_id: '',
                        address: '',
                        business_scope: '',
                        registered_capital: null,
                        employee_count: null,
                        annual_revenue: null,
                        credit_rating: 3,
                        status: 'active',
                        established_date: '',
                        logo: '',
                        remarks: ''
                    };
                    if (this.$refs.groupFormRef) {
                        this.$refs.groupFormRef.resetFields();
                    }
                },
                
                /**
                 * 导出数据
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                /**
                 * 批量操作
                 */
                batchOperation() {
                    if (this.selectedGroups.length === 0) {
                        ElMessage.warning('请先选择要操作的集团');
                        return;
                    }
                    ElMessage.info(`已选择 ${this.selectedGroups.length} 个集团，批量操作功能开发中...`);
                },
                
                /**
                 * 处理每页显示数量变化
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 处理当前页码变化
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                }
            },
            
            mounted() {
                // 页面加载完成后的初始化操作
                this.pagination.total = this.groups.length;
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>